<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            /* display: flex; */
            width: 600px;
            margin: 50px auto 0;
            /* height: 120px; */
            /* border: 1px solid #ccc; */
            /* overflow: hidden; */


        }

        .row {
            /* flex-direction: row; */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 120px;
            padding: 20px;
            margin-top: 20px;
            transition: all 0.3s ease-in-out;
            width: 100%;
            height: 80px;

        }

        .row .col-item {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            padding: 0;
            margin: 0;
        }

        .row .col-item img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 5px;
            padding: 10px;

        }

        .row .col-item h3 {
            font-size: 18px;
            margin-bottom: 5px;
            margin: 0;
        }

        .row .col-item p {
            font-size: 14px;
            color: #999;
            margin-top: 10px;
        }

        .row .col-item:nth-child(1) {

            background-color: rgb(225, 247, 251);
            border-radius: 5px 0 0 5px;
            flex: 1;
        }

        .row .col-item:nth-child(2) {
            background-color: rgb(241, 248, 232);

            flex: 2;


        }

        .row .col-item:nth-child(3) {
            background-color: rgb(254, 235, 239);

            border-radius: 0 5px 5px 0;
            flex: 1;
        }


        .row .col-item:hover {
            transform: scale(1.3);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-item">
                <img src="./image/06item1.png" alt="成员1">
                <h3>成员1</h3>
                <p>负责前端开发</p>
            </div>
            <div class="col-item">
                <img src="./image/06item2.png" alt="成员2">
                <h3>成员2</h3>
                <p>负责后端开发与架构设计</p>
            </div>
            <div class="col-item">
                <img src="./image/06item3.png" alt="成员3">
                <h3>成员3</h3>
                <p>负责测试与质量保障</p>
            </div>
        </div>
    </div>
</body>

</html>